<template>
	<div class="echarts-box" style="width: 100%; height: 100%">
		<Echart :options="options" id="gauge1Chart"></Echart>
	</div>
</template>

<script>
import { graphic } from "echarts";

const animationDuration = 2000;
export default {
	data() {
		return {
			options: {},
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		init(newData) {
			var img =
				"";
			var trafficWay = [
				{
					name: "火车",
					value: 20,
				},
				{
					name: "飞机",
					value: 10,
				},
				{
					name: "客车",
					value: 30,
				},
				{
					name: "轮渡",
					value: 40,
				},
			];

			var data = [];
			var color = [
				"#90F7EC",
				"#00cfff",
				"#006ced",
				"#43CBFF",
				"#ffa800",
				"#ff5b00",
				"#ff3000",
			];
			for (var i = 0; i < trafficWay.length; i++) {
				data.push(
					{
						value: trafficWay[i].value,
						name: trafficWay[i].name,
						itemStyle: {
							borderWidth: 5,
							shadowBlur: 20,
							borderColor: color[i],
							// shadowColor: color[i],
						},
					},
					{
						value: 2,
						name: "",
						itemStyle: {
							label: {
								show: false,
							},
							labelLine: {
								show: false,
							},
							color: "rgba(0, 0, 0, 0)",
							borderColor: "rgba(0, 0, 0, 0)",
							borderWidth: 0,
						},
					}
				);
			}
			var seriesOption = [
				{
					name: "",
					type: "pie",
					clockwise: false,
					radius: [95, 99],
					emphasis: {
						scale: false,
					},
					label: {
						show: true,
						position: "outside",
						color: "#ddd",
						formatter: function (params) {
							var percent = 0;
							var total = 0;
							for (var i = 0; i < trafficWay.length; i++) {
								total += trafficWay[i].value;
							}
							percent = ((params.value / total) * 100).toFixed(0);
							if (params.name !== "") {
								return (
									"交通方式：" +
									params.name +
									"\n" +
									"\n" +
									"占百分比：" +
									percent +
									"%"
								);
							} else {
								return "";
							}
						},
					},
					labelLine: {
						show: true,
					},
					data: data,
				},
			];
			this.options = {
				color: color,
				title: {
					text: "交通方式",
					top: "46%",
					textAlign: "center",
					left: "49%",
					textStyle: {
						color: "#ddd",
						fontSize: 22,
						fontWeight: "400",
					},
				},
				grid: {
					left: "2%",
					right: "2%",
					bottom: "5%",
					top: "30px",
					containLabel: true,
				},
				graphic: {
					elements: [
						{
							type: "image",
							z: 3,
							style: {
								image: img,
								width: 148,
								height: 148,
							},
							left: "center",
							top: "center",
							position: [90, 90],
						},
					],
				},
				tooltip: {
					show: false,
				},
				legend: {
					icon: "circle",
					orient: "horizontal",
					data: ["火车", "飞机", "客车", "轮渡"],
					textStyle: {
						color: "#ddd",
					},
				},
				toolbox: {
					show: false,
				},
				series: seriesOption,
			};
		},
	},
};
</script>

<style lang="scss" scoped></style>
